<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../includes.jsp" %>
<script type="text/javascript" src="<%=basePath%>/resources/js/plugin/template/jtemplates.js"></script>
<div class="row">
	<div id="blogContainer" class="span8">
	    <div id="blogList" style="min-height: 1050px;">
	
	    </div>
	    <!-- 分页按钮 -->
	    <div id="pager" class="pagination">
	        <ul>
	            <li class="page"><a id="first" href="javascript:void(0);">第一页</a></li>
	            <li class="page"><a id="forward" href="javascript:void(0);">前一页</a></li>
	            <li class="page"><a id="next" href="javascript:void(0);">后一页</a></li>
	            <li class="page"><a id="last" href="javascript:void(0);">最后页</a></li>
	        </ul>
	    </div>
	</div>
	<div class="span4" id="homeRight">
		<div class="row" id="pic">
			<img src="<%=basePath%>/resources/images/home/Koala2.jpg" class="img-polaroid">
		</div>
	</div>
</div>
<textarea id="template" style="display: none">
    {#foreach $T.page.list as record}
    <div class="eachBlog hero-unit">
        <div class="blogTitle">
        	<c:url value="/detail/{$T.record.blogId}" var="blogDetailUrl"/>
        	<a href="${blogDetailUrl}">{$T.record.blogTitle}</a>
        </div>
        <div class="blogContent">
            {$T.record.blogText}
        </div>
    </div>
    {#/for}
</textarea>
<script type="text/javascript">
    var numsPerPage;
    var totalRows;
    var currentPage;
    var totalPages;
    $(document).ready(function () {
        queryBlogsList({});//ajax请求首页博客列表数据
        queryPagedBlogsList();
    });
    
    function checkPages(){
    	if(currentPage == totalPages){
    		$(".page a[id='next']").click(function(){
    			return false;
    		});
    	}
    }

    function queryPagedBlogsList() {
        $(".page a").each(function (i, c) {
            $(this).click(function () {
                var checkedId = $(this).attr("id");
                if (checkedId == "last") {
                    queryBlogsList({"p":totalPages});
                }
                if (checkedId == "first") {
                    queryBlogsList({"p":1});
                }
                if (checkedId == "next") {
                    queryBlogsList({"p":currentPage + 1});
                }
                if (checkedId == "forward") {
                    queryBlogsList({"p":currentPage - 1});
                }
            });
        });
    }

    function queryBlogsList(reqData) {
        var url = "<%=basePath%>/queryBlogsAtHomePage";
        $.getJSON(url, reqData, function (data) {
            $(".eachBlog").remove();
            $("#blogList").setTemplateElement("template", null, {filter_data:false});//获取模版元素id,不过滤html
            $("#blogList").processTemplate(data);//处理数据，渲染模版
            numsPerPage = data.page.numsPerPage;
            totalRows = data.page.totalRows;
            currentPage = data.page.currentPage;
            totalPages = data.page.totalPages;
        });
    }
</script>
<style type="text/css">
	#pic{
		padding-left:45px;
	}
	#homeRight{
		border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
		border-radius: 5px 5px 5px 5px;
		background-color: #F5F5F5;
		-moz-border-bottom-colors: none;
	    -moz-border-left-colors: none;
	    -moz-border-right-colors: none;
	    -moz-border-top-colors: none;
	    background-color: #F5F5F5;
	    background-image: -moz-linear-gradient(center top , #FFFFFF, #E6E6E6);
	    height:300px;
	}
    #blogContainer {
    	margin :0 0 0 0;
    	background-image : none;
    }

    .eachBlog {
        font-family: sans-serif;
        height: 150px;
        overflow: hidden;
        word-break: break-all;
        padding:0px;
        margin:2px;
    }

    .blogTitle {
    	padding-left:20px;
    	text-align:left;
        font-size: 12pt;
        font-weight: bold;
        font-family: "微软雅黑", Verdana, sans-serif, "宋体";
    }

    .blogContent {
        font-size: 10pt;
        color: #666;
        line-height: 22px;
    }

    #pager {
        height: 30px;
        text-align: center;
    }

    #pager ul {
        list-style: none;
    }

    #pager ul li {
        float: left;
    }
</style>